<template>

    <!-- 所有的内容要被根节点包含起来 -->
    <div id="">
        <div class="newsinfo-cont">
            <h3 class="title">{{ newsInfo.abstract}}</h3>
            <p class="subTitle">
                <span>发表时间: {{ newsInfo.time | dateFormat}}</span>
                <span>点击: {{ newsInfo.click}}次</span>
            </p>

            <hr>

            <!--内容区域-->
            <div class="content" v-html="newsInfo.content"></div>

            <!--评论子组件区域-->
            <comment-box :id="this.id"></comment-box>
        </div>
    </div>


</template>

<script type="text/javascript">

    import {Toast} from "mint-ui"

    import comment from '../subcomponents/comment.vue'

    export default {
        data: function () {
            return {
                id: this.$route.params.id,  // 将url传递过来的值挂载到 data上
                newsInfo: {}
            }
        },
        created() {
            this.getNewsInfo();
        },
        // 执行的方法
        methods: {
            getNewsInfo() {
                this.$http.get('./src/FalseData/newsInfo.json').then( res => {
                    if( res.body.status === 0){
                        this.newsInfo = res.body.message[this.id - 1];
                    } else {
                        Toast("新闻详情获取失败")
                    }
                })
            }
        },
        components: {
            "comment-box": comment
        }
    }

</script>

<style lang="scss" scoped>
    .newsinfo-cont {
        padding: 0 5px;
        position: relative;

        .title {
            font-size: 16px;
            text-align: left;
            line-height: 20px;
            color: #da322e;
        }

        .subTitle {
            font-size: 14px;
            color: #226aff;

            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .content {
            text-align: justify;
            font-size: 14px;
        }

    }

</style>
